﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/DefaultWithLeft.Master"
  AutoEventWireup="true" CodeBehind="ProductDetail.aspx.cs" Inherits="NguyenHoa.Web.Pages.ProductDetail" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cphContentMain" runat="server">
  <link href="../css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />

  <script src="../Scripts/jCrop.min.js" type="text/javascript"></script>

  <div class="section">
    <div class="wrapper">
      <div class="product_intro">
        <div class="box">
          <div class="inner" style="position: relative;">
            <span class="title">
              <asp:Literal ID="ltrName" runat="server"></asp:Literal>
            </span>
            <br />
            <br />
            <asp:Literal ID="ltrDescription" runat="server"></asp:Literal>
          </div>
        </div>
        <div class="product_icon">
          <asp:Repeater ID="rptSlideShow" runat="server">
            <ItemTemplate>
              <img src="<%#"../" + Eval("Path").ToString() %>" alt=""  />
            </ItemTemplate>
          </asp:Repeater>
        </div>
        <%--   <div id="divZoomedImage" style="position: absolute; top: 10px; right: 240px; width: 150px;
          height: 150px; overflow: hidden; display: none;">
          <img id="imgPreview" alt="" src="" />
        </div>--%>
      </div>
      <div class="product_photo">
        <%-- <center>
          <img id="imgOrg" alt="" src="" height="300" />
        </center>--%>
      </div>
    </div>
  </div>
  <asp:Literal ID="ltrContent" runat="server"></asp:Literal>
  <br />

  <script language="javascript" type="text/javascript">
    var jcrop_api;

    function showPreview(coords) {
      if (parseInt(coords.w) > 0) {
        var orgWidth = jQuery('#imgOrg').width();
        var orgHeight = jQuery('#imgOrg').height();
        var rx = 150 / coords.w;
        var ry = 150 / coords.h;

        jQuery('#imgPreview').css({
          width: Math.round(rx * orgWidth) + 'px',
          height: Math.round(ry * orgHeight) + 'px',
          marginLeft: '-' + Math.round(rx * coords.x) + 'px',
          marginTop: '-' + Math.round(ry * coords.y) + 'px'
        });
      }
    }

    function changePreview(obj) {
      var productIcons = jQuery(".product_icon img");
      var orgWidth = Math.round(300 * obj.width() / obj.height());

      productIcons.fadeTo("normal", 0.4);
      obj.fadeTo("normal", 1);
      jQuery("#imgPreview").attr("src", obj.attr("src"));
      jQuery("#imgOrg").attr("src", obj.attr("src")).width(orgWidth).css("display", "");

      if (jcrop_api != null) {
        jcrop_api.destroy();
        jcrop_api.release();
      }

      //Init zoom
      jcrop_api = $.Jcrop('#imgOrg',
        {
          onChange: showPreview,
          onSelect: showPreview,
          aspectRatio: 1
        }
      );
    }

    jQuery(document).ready(function() {
      var productIcons = jQuery(".product_icon img");
      if (productIcons.length) {
        //Set events for icons
        productIcons.click(function() {
          changePreview(jQuery(this));
        });

        //Call first Preview
        changePreview(jQuery(productIcons[0]));
      }
    });
  </script>

</asp:Content>
